<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta content="ie=edge" http-equiv="x-ua-compatible" />
  <meta name="robots" content="noindex,nofollow" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
  <title>某熊的主页</title>
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #ffffff;
    }

    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: absolute;
    }

    body {
      font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
        sans-serif;
      font-size: calc(10px + 0.33vw);
      -webkit-font-smoothing: antialiased;
      color: #121314;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .name {
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .name img {
      width: 250px;
    }

    .name .line {
      border-bottom: 2px solid;
      max-width: 250px;
      margin-top: 8px;
      width: 0px;
    }

    @keyframes stretching {
      0% {
        width: 0px;
      }

      50% {
        width: 200px;
      }

      100% {
        width: 250px;
      }
    }

    .name:hover .line {
      animation: stretching 2s ease-in-out forwards;
    }

    .slogan {
      display: flex;
      align-items: center;
    }

    .slogan .item {
      width: 200px;
      height: 150px;

      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
    }

    .slogan .item:hover {
      transform: scale(1.1);
      transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
      cursor: pointer;
    }

    .slogan .label {
      font-size: 18px;
      margin-bottom: 16px;
      color: rgba(0, 0, 0, 0.85);
    }

    .slogan img {
      width: 30px;
      height: 30px;
    }

    .point {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #000000;
      border: 1px solid #979797;
    }
  </style>
  <style>
    * {
      user-select: none;
    }

    html,
    body {
      overflow: hidden;
    }

    body {
      margin: 0;
      position: fixed;
      width: 100%;
      height: 100%;
    }

    canvas {
      width: 100%;
      height: 100%;
    }

    .dg {
      opacity: 0.9;
    }

    .dg .property-name {
      overflow: visible;
    }

    @font-face {
      font-family: "iconfont";
      src: url("iconfont.ttf") format("truetype");
    }

    .bigFont {
      font-size: 150%;
      color: #8c8c8c;
    }

    .cr.function.appBigFont {
      font-size: 150%;
      line-height: 27px;
      color: #a5f8d3;
      background-color: #023c40;
    }

    .cr.function.appBigFont .property-name {
      float: none;
    }

    .cr.function.appBigFont .icon {
      position: sticky;
      bottom: 27px;
    }

    .icon {
      font-family: "iconfont";
      font-size: 130%;
      float: right;
    }

    .twitter:before {
      content: "a";
    }

    .github:before {
      content: "b";
    }

    .app:before {
      content: "c";
    }

    .discord:before {
      content: "d";
    }

    a[title="站长统计"]{
      display: none;
    }
  </style>
</head>

<body>
  <div class="container" style="text-align:center">
    <div class="name" onclick="window.location.href='https://github.com/wx-chevalier'" id="name">
      <div>
        <img src="https://s2.ax1x.com/2020/02/07/12tovR.md.png" style="height: 50px;width: auto;margin-right: 16px;" />
        <img src="https://i.postimg.cc/Kj8t7Tqk/image.png" alt="" />
      </div>
      <div class="line"></div>
    </div>
    <div class="slogan">
      <div class="item" id="search"
        onclick="window.location.href='https://github.com/wx-chevalier/Developer-Zero-To-Mastery'">
        <div class="label">Knowledge | 知识体系</div>
        <img src="https://s2.ax1x.com/2019/06/27/Zmagld.png" alt="" />
      </div>
      <div class="point"></div>
      <div class="item" id="book" onclick="window.location.href='/books'">
        <div class="label">Books | 书籍笔记</div>
        <img src="https://s2.ax1x.com/2019/03/29/A0C6X9.png" alt="" />
      </div>
      <div class="point"></div>
      <div class="item" id="code" onclick="window.location.href='/projects'">
        <div class="label">Code | 代码项目</div>
        <img src="https://s2.ax1x.com/2019/03/29/A0Cy6J.png" alt="" style="height: 25px;margin: 2.5px 0;" />
      </div>
      <div class="point"></div>
      <div class="item" id="product" onclick="window.location.href='/home'">
        <div class="label">Idea | 瞎折腾</div>
        <img src="https://s2.ax1x.com/2019/03/29/A0C201.png" alt="" />
      </div>
    </div>
    <style>
      .bottom {
        position: fixed;
        bottom: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .star {
        display: flex;
        align-items: center;
      }
    </style>
    <div class="bottom">
      <a href="https://github.com/wx-chevalier">
        <div class="star">
          <svg aria-label="star" height="16" class="octicon octicon-star v-align-text-bottom" viewBox="0 0 14 16"
            version="1.1" width="14" role="img" style="margin-right: 8px;">
            <path fill-rule="evenodd"
              d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path>
          </svg>
          <span id="startCount"></span>
        </div>
      </a>
    </div>
  </div>
</body>
<script>
  // Check that service workers are supported
  if ('serviceWorker' in navigator) {
    // Use the window load event to keep the page load performant
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/sw.js');
    });
  }
  </script>
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@4"></script>
<script>
  tippy("#name", {
    content: "点击前往 Github 主页"
  });
  tippy("#book", {
    content: "点击查看系列文章"
  });
  tippy("#code", {
    content: "点击查看开源的前后端轮子们"
  });
  tippy("#product", {
    content: "点击查看我的产品"
  });
  tippy("#search", {
    content: "点击检索文章资料"
  });
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<script>
  window.ga =
    window.ga ||
    function () {
      (ga.q = ga.q || []).push(arguments);
    };
  ga.l = +new Date();
  ga("create", "UA-126390624-1", "auto");
  ga("send", "pageview");
</script>

<script>
  (function (h, o, t, j, a, r) {
    h.hj =
      h.hj ||
      function () {
        (h.hj.q = h.hj.q || []).push(arguments);
      };
    h._hjSettings = {
      hjid: 1026253,
      hjsv: 6
    };
    a = o.getElementsByTagName("head")[0];
    r = o.createElement("script");
    r.async = 1;
    r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
    a.appendChild(r);
  })(window, document, "https://static.hotjar.com/c/hotjar-", ".js?sv=");
</script>

<script type="text/javascript" src="./dat.gui.min.js"></script>
<script src="./three.min.js"></script>
<script src="./postprocessing.min.js"></script>
<script src="./three-bg.js"></script>

<script src="./github-count.js"></script>
<script>
  let demo = new CountUp(
    "startCount",
    githubStars("wx-chevalier") +
    githubStars("ng-tech-edu"), {
      duration: 10
    }
  );

  if (!demo.error) {
    demo.start();
  } else {
    console.error(demo.error);
  }
</script>
<script type="text/javascript" src="https://s4.cnzz.com/z_stat.php?id=1279148160&web_id=1279148160"></script>

</html>